﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>点击空白区域扩展</title>
    <script type="text/javascript">
        function onImageClick(event) {
            var img = document.getElementById("image");
            var x = event.offsetX;
            var y = event.offsetY;

            var desc = document.getElementById("desc");

            //通过ajax将坐标发送给后端
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/Home/GetRegion", true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = JSON.parse(xhr.responseText);

                    var point = "(" + result.Vertices[0].X + "," + result.Vertices[0].Y + ")"
                    var point1 = "(" + result.Vertices[1].X + "," + result.Vertices[1].Y + ")"
                    var point2 = "(" + result.Vertices[2].X + "," + result.Vertices[2].Y + ")"
                    var point3 = "(" + result.Vertices[3].X + "," + result.Vertices[3].Y + ")"
                    var point4 = "(" + result.Vertices[4].X + "," + result.Vertices[4].Y + ")";

                    var thtml = "最大空白区域像素数量：" + result.Count + "，\r\n"
                        + "最大空白区域面积：" + result.Area + ", \n\r"
                        + "点击点坐标：" + point + "， \n\r"
                        + "顶点：\r\n左上：" + point1 + "，右上：" + point2 + "，\r\n左下：" + point4 + "，右下：" + point3;

                    desc.innerHTML = thtml;
                    alert(thtml);
                }
            };
            xhr.send(JSON.stringify({ x: x, y: y }));

        }
    </script>
</head>
<body>
    <div>
        <p id="desc"></p>
    </div>
    <div>
        <img id="image" src="~/Content/Images/pic.jpg" alt="Image" onclick="onImageClick(event)" />
    </div>
</body>
</html>
